<template>
  <form-drawer ref="formDrawerRef" title="上传合同" @submit="handleUploadSubmit">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="合同照片" prop="contract">
        <upload-img :limit="4" :imgList="contractImg" @success="handleUpdateImg"></upload-img>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>
<script setup lang="ts">
import { ref, watch, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { uploadSecondContractApi } from "@/api/second";

const emits = defineEmits(["success"]);
const props = defineProps({
  record: {
    type: Object,
    default: () => ({})
  }
});
const { record } = toRefs(props);
const contractImg = ref([]);
let { formDrawerRef, formRef, form, rules, handleCreate, handleSubmit } = useInitForm({
  form: {
    recordId: "",
    contract: ""
  },
  rules: {
    contractImg: [
      {
        required: true,
        message: "请上传合同的4张照片",
        trigger: "change"
      }
    ]
  },
  createData: uploadSecondContractApi,
  success: () => {
    emits("success");
  }
});
// 图片上传
const handleUpdateImg = (val: any) => {
  contractImg.value = val;
};
// 提交
const handleUploadSubmit = () => {
  console.log(form, "---test");
  if (contractImg.value.length < 4) {
    return ElMessage({
      showClose: true,
      message: "请上传合同的4张照片",
      type: "warning"
    });
  }
  form.contract = contractImg.value.map((item: any) => item.url).join(",");
  handleSubmit();
};
watch(
  () => record.value,
  (val) => {
    form.recordId = val.id;
    if (val.contract) {
      contractImg.value = val.contract.split(",").map((item: any) => ({ url: item }));
    }
  },
  {
    immediate: true,
    deep: true
  }
);
defineExpose({
  handleCreate
});
</script>
<style scoped lang="scss"></style>
